<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web截图功能</title>
    <!--需要引入jquery和html2canvas-->
    <!--You need to use Jquery and html2canvas-->
    <script type="text/javascript" src="static/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="static/html2canvas.min.js"></script>
</head>
<body>
<!-- 截图功能element -->
<!-- printscreen need element -->
    <div style="position: fixed;z-index:8;" id="cutPanel"></div>
    <canvas id="cutCanvas" style="display:none;"></canvas>
    <div id="cutFinishBtn" style="display:none;position:absolute;z-index:2010;">
        <button class="finishbtn">完成</button>
        <button class="cancel">取消</button>
    </div>
<!-- end -->
<button id="start">截屏</button>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<p>内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一内容一</p>
<p>内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二内容二</p>
</body>
<script type="text/javascript" src="js/printscreenJS.js"></script>
<script type="text/javascript">
    $(function(){
        //--------------截图功能调用--------------
        $("#start").on('click',function(){
            var cutPanel = '#cutPanel';
            //调用截屏方法，接收两个参数(截屏区域，遮罩窗口);
            //截屏区域一般为document.body
            screenshot.html2Canvas(document.body,cutPanel);
        });
        //鼠标操作  选取截屏范围
        $("#cutPanel").on('mousedown',function(e){
            var _e = e;
            screenshot.mousedown(_e);
            $(this).on('mousemove',function(ev){
                var _ev = ev;
                screenshot.mousemove(_ev);
            });
        });
        $("#cutPanel").on('mouseup',function(e){
            var _e = e;
            var cutFinishBtn = $('#cutFinishBtn');
            $(this).off('mousemove');
            //松开鼠标，接收两个参数（event,截屏按钮元素）
            screenshot.mouseleave(_e,cutFinishBtn);
        });
        //------end-----
        $('#cutFinishBtn .finishbtn').on('click',function(){
            //截屏按钮元素（完成）点击事件
            $(this).parent().hide();
            //完成事件接收两个参数（截屏canvas元素的ID名,callback）;
            screenshot.cutFinish('cutCanvas',function(imgData){
                //回调返回的数据为截好图片的64位编码信息（可直接使用或上传服务器）
                var imgStr = '<img src="'+imgData+'" />';
                $('body').append(imgStr);
            });
        });
        $('#cutFinishBtn .cancel').on('click',function(){
            //截屏按钮元素（取消）点击事件
            $(this).parent().hide();
            screenshot.cancelCut();
        });
        //---------end-----------
    });
</script>
</html>